<template>
  <div>
    <div class="pic">
      <van-icon class="back" name="arrow-left" @click="goBack" />
      <div class="(item,index)" v-for="item in details" :key="item"></div>
      <img :src="details.cover" class="singerimg" />
      <div class="singername">{{ details.name }}</div>
    </div>

    <div class="song-list">
      <div
        v-for="item in songList"
        :key="item.songid"
        @click="selectRankList(item)"
      >
        <h3 class="songname">{{ item.al.name }}</h3>
        <p class="singersong">{{ item.ar[0].name }}-{{ item.al.name }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      songList: [],
      details: {},
      id: "",
      songname: "",
      singername: "",
    };
  },
  created() {
    this.getdetails();
    this.getsongList();
  },
  methods: {
    getdetails() {
      axios
        .get("/api/artist/detail", {
          params: {
            id: this.$route.params.id,
          },
        })
        .then((res) => {
          console.log(res.data);
          this.details = res.data.data.artist;
          // this.singerUrl = res.data.data;
        })
        .catch((err) => {
          console.error(err);
        });
    },
    goBack() {
      this.$router.go(-1);
    },
    getsongList() {
      axios
        .get("/api/artists", {
          params: {
            id: this.$route.params.id,
          },
        })
        .then((res) => {
          console.log(res.data);
          this.songList = res.data.hotSongs;
        })
        .catch((err) => {
          console.error(err);
        });
    },
    selectRankList(item) {
      const id = item.id;
      this.$router.push({
        name: "Play",
        params: { id: id },
      });
    },
  },
};
</script>

<style>
.pic {
  z-index: 2;
  display: inline;
  width: 100%;
  height: 50%;
}
.back {
  color: aliceblue;
  z-index: 100;
  position: absolute;
  top: 20px;
  left: 10px;
}
.singerimg {
  display: flex;
  z-index: -1;
  width: 100%;
}
.singername {
  color: rgb(122, 14, 7);
  z-index: 100;
  position: absolute;
  top: 280px;
  left: 10px;
}
.songname {
  text-align: left;
  left: 10px;
}
.singersong {
  left: 10px;
  text-align: left;
}
</style>